<template>
  <div class="eplist_ep_list_wrapper__Sy5N8">
    <!--上 标题-->
    <div class="eplist_list_title__48o_y">
      <div class="eplist_left_wrap__UFyXT">
        <h4>{{ captionIndex }}</h4>
      </div>
      <div class="eplist_right_wrap__WaBpF">
        <span class="eplist_ep_list_order__TfnoF">
          <!--默认降序-->
          <span v-if="markCut" @click="markCut = !markCut" class="iconfont icon-jiangxu modeChangeBtnspan hover-blue"></span>
          <span v-if="!markCut" @click="markCut = !markCut" class="iconfont icon-shengxu modeChangeBtnspan hover-blue"></span>
        </span>
    </div>
    </div>
    <!--中 选中标题-->
    <div class="SectionSelector_SectionSelector__TZ_QZ">
      <div class="SectionSelector_itemsContainer__65Q_b">
        <div v-for="(item,index) in detailList.videoItems" :key="index" class="SectionSelector_sectionItem__rFNEH"
             @click="captionIndex = item.title;blueHover = index;changeVideoEpisodeList(item.captionId)"
             :class="{SectionSelector_active__dySMp:blueHover === index,hover_blue:blueHover != index}">{{ item.title }}</div>
      </div>
    </div>
    <!--下 视频显示列表-->
    <div class="imageList_wrap___f73Z small-mode">
      <div v-for="(item,index) in videoEpisodeThemeList" :key="index" class="imageListItem_wrap__o28QW">
        <a @click="changeIndex(item.videoId);blueHover = index" :class="{SectionSelector_active__dySMp:blueHover === index,hover_blue:blueHover != index}" target="" rel="noreferrer">
          <div class="imageListItem_coverWrap__evIUp">
            <picture>
              <img alt="" src="https://i0.hdslb.com/bfs/archive/9216744fbef12060183933d76db069d5511bad69.jpg@212w_120h.webp" style="width: 100%;height: 100%"/>
            </picture>
          </div>
          <div>
            <div :title="item.topTitle + item.title" class="imageListItem_titleWrap__YTlLH">
              <div class="imageListItem_title__MC0fG imageListItem_shortTitle__yV5mg">{{item.topTitle}}</div>
              <div class="imageListItem_title__MC0fG imageListItem_longTitle__I6il0">{{ item.title }}</div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import {toRaw} from "vue";

export default {
  name: "videoEpisodeTheme",
  data(){
    return{
      videoEpisodeThemeList:[],
      markCut:true,
      // 给caption[]赋值时，也给captionIndex赋初始值：caption[0]
      captionIndex: this.detailList.videoItems[0].title,
      // 空值颜色样式
      blueHover: 0,
    }
  },
  created(){
    this.changeVideoEpisodeList(this.detailList.videoItems[0].captionId)
  },
  inject: [
    "detailList",
      "switchVideo"
  ],
  methods:{
    changeVideoEpisodeList(captionId){
      var list = []
      this.detailList.videoItems.forEach(function (item){
        if (item.captionId === captionId){
          list = toRaw(item.items)
        }
      })
      this.videoEpisodeThemeList = list
    },
    changeIndex(videoId){
      this.switchVideo(videoId)
    }
  }
}
</script>

<style scoped>
/*中部 视频选中样式*/
.SectionSelector_active__dySMp {
  color: #00AEEC;
}
.SectionSelector_active__dySMp {
  color: #00AEEC;
}
.hover_blue:hover {
  color: #4daae4;
}
.eplist_ep_list_wrapper__Sy5N8 {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
  position: relative;
  background-color: #F1F2F3;
  border-radius: 6px;
  margin-bottom: 15px;
}
.eplist_list_title__48o_y {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
}
.eplist_left_wrap__UFyXT {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}
.eplist_left_wrap__UFyXT h4 {
  padding: 0;
  font-size: 16px;
  color: #18191C;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 9px 0 0;
}
.eplist_right_wrap__WaBpF {
  display: flex;
  flex-direction: row;
}
.eplist_ep_list_order__TfnoF {
  width: 24px;
  height: 24px;
  margin-left: 17px;
  cursor: pointer;
  fill: #61666D;
  stroke: #61666D;
}

.modeChangeBtnspan{
  overflow: hidden;
  width: 24px;
  height: 24px;
}
.SectionSelector_SectionSelector__TZ_QZ {
  padding-left: 6px;
  width: calc(100% - 16px);
  position: relative;
}
.SectionSelector_SectionSelector__TZ_QZ .SectionSelector_itemsContainer__65Q_b {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  height: 38px;
  position: relative;
  align-items: center;
  padding-right: 90px;
}

.SectionSelector_sectionItem__rFNEH {
  padding: 6px 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  /*color: #61666D;*/
  flex-shrink: 0;
  cursor: pointer;
}
.imageList_wrap___f73Z {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: 8px 10px 2px 16px;
  max-height: 350px;
  overflow: auto;
}
.imageList_wrap___f73Z a {
  width: 100%;
  height: 100%;
}
.imageListItem_wrap__o28QW {
  margin-bottom: 12px;
  height: 59px;
  cursor: pointer;
}
.imageListItem_wrap__o28QW a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.imageListItem_coverWrap__evIUp {
  position: relative;
  margin-right: 10px;
  width: 106px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: #C9CCD0 url(https://s1.hdslb.com/bfs/static/ogv/video2/_next/static/media/img_loading.6d24ade7.png) 50% no-repeat;
  background-size: 50%;
  flex-shrink: 0;
}
.imageListItem_shortTitle__yV5mg {
  margin-bottom: 0;
  display: -webkit-box;
  white-space: normal;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.imageListItem_title__MC0fG {
  font-size: 14px;
  line-height: 18px;
  min-height: 18px;
  max-height: 36px;
  font-weight: 500;
  align-self: flex-start;
  transition: color .3s ease;
}
.imageListItem_longTitle__I6il0 {
  margin-bottom: 0;
  display: -webkit-box;
  white-space: normal;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-top: 5px;
}
</style>
